<template>
    <div>
        <div class="title">
            <title-dom title="Login"></title-dom>
        </div>
        <div class="tabs">
            <tabs-dom :tab="tabs"></tabs-dom>
        </div>
        <div class="form-groups">
            <div class="form-group">
                <div class="ipt-title">
                    <span class="input-title">Email</span>
                    <span class="forgotPassword"></span>
                </div>
                <my-input type1="text" value="Enter Email Address" class="myinput" :rule="rulesPhone"
                    @message="(e) => { form.account = e }" :error="accountError"></my-input>
            </div>
            <div class="form-group">
                <div class="ipt-title">
                    <span class="input-title">Password</span>
                    <span class="forgotPassword" @click="$router.push('/changePassword')">Forgot password?</span>
                </div>
                <my-input type1="password" value="Enter Password" class="myinput" :rule="rulesPassword"
                    :showPassword="true" @message="(e) => { form.pwd = e }" :error="pwdError"></my-input>
            </div>
        </div>
        <el-button class="login" @click="login">Login</el-button>
        <p class="account">Don’t have an account? <i class="account-btn" @click="$router.push('/register')">Join Us
                now</i></p>
    </div>
</template>

<script>
import myInput from '@/components/common/account/components/inputRule.vue';
import checkBox from "@/components/common/account/components/checkBox.vue";
import otherLogin from "@/components/common/account/components/otherLogin.vue";
import titleDom from "@/components/common/account/components/title.vue";
import tabsDom from "@/components/common/account/components/tabs.vue";

export default {
    components: {
        myInput,
        checkBox,
        otherLogin,
        titleDom,
        tabsDom
    },
    data() {
        return {
            tabs: [{
                name: "Email",
                to: "/login/emailLogin"
            }],
            form: {
                email: "",
                code: ""
            },
            automaticLogon: this.$store.state.automaticLogon,
            form: {
                account: "",
                pwd: ""
            },
            accountError: "",
            pwdError: ""
        }
    },
    methods: {
        login() {
            if (!this.form.account) {
                this.accountError = 'Cannot be empty';
                return;
            } else if (!this.form.pwd) {
                this.pwdError = 'Cannot be emptys';
                return;
            } else {
                this.$store.dispatch('passwordLogins', this.form);
            }
        }
    },
    computed: {
        rulesPhone() {
            return {
                trigger: 'blur',
                max: 17,
                num_message: 'Format incorrect',
                req_message: 'Cannot be empty',
                required: true,
                reg: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                reg_message: 'Format incorrect'
            }
        },
        rulesPassword() {
            return {
                trigger: 'blur',
                min: 6,
                max: 12,
                num_message: 'Error. Your password must be 6-12 characters, of which at least 1 must be numeric, 1 uppercase letter and 1 lowercase letter. Example : Abc123',
                req_message: 'Cannot be empty',
                required: true,
                reg: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,12}$/,
                reg_message: 'Error. Your password must be 6-12 characters, of which at least 1 must be numeric, 1 uppercase letter and 1 lowercase letter. Example : Abc123'
            }
        }
    }
}
</script>

<style lang="less" scoped>
.tabs {
    margin-top: 1.07rem;
    margin-bottom: 1.6rem;

    :deep(.router-link-active) {
        font-family: 'Helvetica-Bold, Helvetica' !important;
    }


}

.title {
    margin-top: 1.6rem;
}

.form-groups {
    width: 16rem;
    height: 8.32rem;
}

.input-title {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'Helvetica';
    font-weight: normal;
    color: #212121;
    line-height: 0.96rem;
}

.forgotPassword {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'Helvetica';
    font-weight: normal;
    color: #68656C;
    line-height: 0.96rem;
    text-decoration: underline;
}

.ipt-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.form-group {
    margin-bottom: 0.53rem;
}

.login {
    width: 16rem;
    height: 1.92rem;
    background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
    border-radius: 0.21rem;
    backdrop-filter: blur(10px);

    :deep(span) {
        height: 0.96rem;
        font-size: 0.64rem;
        font-family: 'Helvetica';
        font-weight: normal;
        color: #FFFFFF;
        line-height: 0.96rem;
    }
}




.form-group :deep(.el-input__inner::placeholder) {
    height: 0.85rem;
    font-size: 0.53rem;
    font-family: 'PingFangSC-Regular, PingFang SC';
    font-weight: normal;
    color: #C5C5CA;
    line-height: 0.85rem;
}

.account {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'Helvetica';
    color: #7709CC;
    line-height: 0.96rem;
    text-align: center;
    margin-top: 0.53rem;

    .account-btn {
        font-style: normal;
        text-decoration: underline;
    }
}
</style>